<template>
	<view class="">
		<view class="top">
			<image src="../../static/youdi.png" mode="" style="width: 100%;height:700rpx;"></image>
		</view>
		<view class="font">
			<view class="flex" v-for="(item,index) in list" :key="index">
				<view><p class="text">{{item.text}}<span class="text2">{{item.text2}}</span></p></view>
				<view><p class="text3">{{item.text3}}</p></view>
			</view>
			<view class="p_did" v-for="(item,index) in list1" :key="index">
				<p class="diff">{{item.text}} <image :src="item.text2" mode="" style="width: 50rpx;height: 50rpx;"></image> </p>
			</view>
			<view class="jiaYou flex" v-for="(item,index) in list2" :key="index">
				<view class="left_zuo">
					<image :src="item.text" mode="" style="width: 150rpx;height:100rpx;"></image>
				</view>
				<view class="middle" flex1>
					<p>{{item.text2}}</p>
					<p>{{item.text3}}</p>
					<progress max="100" border-radius="15px" value="100" color="red" id="progress"><span class="shengY">剩余30张</span></progress>
				</view>
				<view class="right_you">
					<p><button class="xiaoP">{{item.text4}}</button></p>
					<p class="xiaoP1">{{item.text5}}</p>
				</view>
			</view>
			<view class="jiaYou flex" v-for="(item,index) in list2" :key="index">
				<view class="left_zuo">
					<image :src="item.text" mode="" style="width: 150rpx;height:100rpx;"></image>
				</view>
				<view class="middle" flex1>
					<p>{{item.text2}}</p>
					<p>{{item.text3}}</p>
					<progress max="100" border-radius="15px" value="100" color="red" id="progress"><span class="shengY">剩余30张</span></progress>
				</view>
				<view class="right_you">
					<p><button class="xiaoP">{{item.text4}}</button></p>
					<p class="xiaoP1">{{item.text5}}</p>
				</view>
			</view>
			<view class="jiaYou flex" v-for="(item,index) in list2" :key="index">
				<view class="left_zuo">
					<image :src="item.text" mode="" style="width: 150rpx;height:100rpx;"></image>
				</view>
				<view class="middle" flex1>
					<p>{{item.text2}}</p>
					<p>{{item.text3}}</p>
					<progress max="100" border-radius="15px" value="100" color="red" id="progress"><span class="shengY">剩余30张</span></progress>
				</view>
				<view class="right_you">
					<p><button class="xiaoP">{{item.text4}}</button></p>
					<p class="xiaoP1">{{item.text5}}</p>
				</view>
			</view>
			<view class="jiaYou flex" v-for="(item,index) in list2" :key="index">
				<view class="left_zuo">
					<image :src="item.text" mode="" style="width: 150rpx;height:100rpx;"></image>
				</view>
				<view class="middle" flex1>
					<p>{{item.text2}}</p>
					<p>{{item.text3}}</p>
					<progress max="100" border-radius="15px" value="100" color="red" id="progress"><span class="shengY">剩余30张</span></progress>
				</view>
				<view class="right_you">
					<p><button class="xiaoP">{{item.text4}}</button></p>
					<p class="xiaoP1">{{item.text5}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[{text:'油滴兑换',text2:'领油滴换好礼，加油更省钱',text3:'更多好物 >'}],
				list1:[{text:'同一商品每天仅可兑换一次，详情查看',text2:'../../static/w.png',}],
				list2:[{text:'../../static/youhui_03.png',text2:'20元加油券',text3:'满200元可用有效期7天',text4:'12999油滴兑换',text5:'原价15999油滴兑换'}],
			}
		}
	}
</script>

<style>
	.flex{display: flex;justify-content: space-between;}
	.font{background-color: aliceblue;border-radius: 20px;padding: 15px;}
	.text{font-size: 35rpx;}
	.text2{font-size: 30rpx;padding-left: 5px;color: #ccc;}
	.text3{font-size: 30rpx;line-height: 50rpx;}
	.diff{font-size: 30rpx;}
	.jiaYou{border: red 1px solid;border-radius: 15rpx;padding: 20rpx;margin: 20rpx 0;}
	.flex1{display: flex;flex-direction: column;}
	.middle p{font-size: 25rpx;overflow: hidden;margin-bottom: 10rpx;}
	.xiaoP{font-size: 20rpx;border-radius: 20px;border: #ccc 1px solid;background-color: rgba(red, 0, 0, 0.5);margin-bottom: 10px;}
	.xiaoP1{font-size: 20rpx;text-align: center;text-decoration: line-through;}
	.shengY{font-size: 20rpx;padding-left: 10rpx;float: left;}
</style>